<template>
	<view>

		<!-- <um-dropdown @change="fnChange" rangeKey="name" :optionList="shopList" placeholder="请选择店铺查看" selectedItemStyle="color:2973F8;" style="margin: 10px;"></um-dropdown> -->
		<!-- <view style="min-height: 50px;padding-left: 10px;background-color: white;padding-top: 10px;margin: 10px;">请选择查看时间</view> -->

		<scroll-view scroll-x class="bg-white nav" scroll-with-animation :scroll-left="scrollLeft" >
			<view class="propertyBox">
				<view class="cu-item" :class="index == TabCur ? 'text-green cur' : ''" v-for="(item, index) in modules"
					:key="index" @tap="tabSelect" :data-id="index">
					{{ item.name }}
				</view>
			</view>
		</scroll-view>

		<view>
		    <uni-calendar 
		    ref="calendar"
		    :insert="false"
		    @confirm="confirm"
			:clearDate="false"
			:range ="true"
		     />
		</view>
		<button @click="open" style="margin-top: 20px;color: #008dd4;" v-if="TabCur === 0">{{before}} - {{after}}</button>
		
		
		<view class="charts-box" v-show="TabCur === 0 && chartData.categories" style="margin-top: 40px;margin-bottom: 20px;">
			<qiun-data-charts type="column" :opts="opts" :chartData="chartData" :ontouch="true" />
		</view>
		
		
		<view class="charts-box" v-if="TabCur === 1 && chartData.categories" style="margin-top: 40px;margin-bottom: 20px;">
		    <qiun-data-charts 
		      type="line"
		      :opts="opts"
		      :chartData="chartData"
			  :ontouch="true"
		    />
		</view>
		
		<view class="container" v-if="TabCur === 2 && formList.length>0" style="margin-top: 40px;margin-bottom: 20px;background-color: whitesmoke;">
			<input v-model="inputValue" @input="handleInput" placeholder="选择负责人" style="min-height: 50px;margin-left: 10px;margin-bottom: 10px;background-color: white;border-radius: 10px;padding-left: 15px;">
			<view class="suggestions" v-if="suggestions.length > 0">
			  <view v-for="(suggestion, index) in suggestions" :key="index" @click="selectSuggestion(suggestion)" style="min-height: 30px;margin-top: 5px;">
				{{ suggestion }}
			  </view>
			</view>
			<view class="flex  radius" style="background-color: white;">
				<view class="flex-twice  padding-sm  ">店铺名称（{{formList.length}})</view>
				<view class="flex-sub  padding-sm  ">负责人</view>
				<view class="flex-sub  padding-sm  ">GMV</view>
				<view class="flex-sub  padding-sm  ">利润</view>
			</view>
		    <view class="flex  p-xs  mb-sm radius " v-for="(item, index) in formList" :key="index" style="background-color: white;margin: 10px;border-radius: 10px;">
		    	<view class="flex-twice  padding-sm  ">{{item.name}}</view>
		    	<view class="flex-sub  padding-sm  ">{{item.headName}}</view>
		    	<view class="flex-sub  padding-sm  ">{{item.gmvSum}}</view>
		    	<view class="flex-sub  padding-sm  ">{{item.profitSum}}</view>
		    </view>
			<view class="flex  radius" style="background-color: white;">
				<view class="flex-twice  padding-sm  ">合计</view>
				<view class="flex-sub  padding-sm  "></view>
				<view class="flex-sub  padding-sm  ">{{totalGmvSum }}</view>
				<view class="flex-sub  padding-sm  ">{{totalProfitSum}}</view>
			</view>
		</view>
		
		<view class="" v-if="delayList.length>0 && TabCur === 0">
			<view class="" style="min-height: 50px;padding-left: 10px;background-color: white;display: flex;justify-items: center;align-items: center;color: red;" >
				超时完成（{{delayList.length}})
			</view>
			<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item, index) in delayList"
				:key="item.id"  style="margin: 10px;background-color: white;border-radius: 8px;">
				<view class="topTitleV unitV" style="margin: 10px;padding-top: 10px;font-weight: bold;color: red;">{{ item.shop.name }}</view>
				   <!-- 共占一行的元素 -->
				   <div style="display: flex; flex-wrap: wrap;margin: 10px;padding-bottom: 10px;">
					 <view class="topTitleV" style="margin-left: 30px;">{{ item.shop.platform }}</view>
					 <view class="topTitleV" style="margin-left: 30px;">{{ item.headName }}</view>
					 <view class="topTitleV" style="margin-left: 30px;">{{ item.taskTime }}</view>
					 <view class="cellView" :style="{ color: bindColor(item), backgroundColor: bindBgColor(item), marginLeft: 'auto' }">
					   {{ bindTag(item) }}
					 </view>
				   </div>
			</view>
		</view>
		
		<view class="" v-if="incompleteList.length>0 && TabCur === 0">
			<view class="" style="min-height: 50px;padding-left: 10px;background-color: white;display: flex;justify-items: center;align-items: center;" >
				未完成（{{incompleteList.length}})
			</view>
			<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item, index) in incompleteList"
				:key="item.id"  style="margin: 10px;background-color: white;border-radius: 8px;">
				 <view class="topTitleV unitV" style="margin: 10px;padding-top: 10px;font-weight: bold;color: cornflowerblue;">{{ item.shop.name }}</view>
					<!-- 共占一行的元素 -->
					<div style="display: flex; flex-wrap: wrap;margin: 10px;padding-bottom: 10px;">
					  <view class="topTitleV" style="margin-left: 30px;">{{ item.shop.platform }}</view>
					  <view class="topTitleV" style="margin-left: 30px;">{{ item.headName }}</view>
					  <view class="topTitleV" style="margin-left: 30px;">{{ item.taskTime }}</view>
					  <view class="cellView" :style="{ color: bindColor(item), backgroundColor: bindBgColor(item), marginLeft: 'auto' }">
						{{ bindTag(item) }}
					  </view>
					</div>
			</view>
		</view>

	</view>
</template>

<script>
	import qiunDataCharts from "../../uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue"
	import dropDown from "../../uni_modules/um-dropdown/components/um-dropdown/um-dropdown.vue"
	import request from '../../common/request';
	import common from 'common/common.js';
	export default {
		components: {
			qiunDataCharts,
			dropDown
		},
		data() {
			const currentDate = new Date();
			const formattedCurrentDate = `${currentDate.getFullYear()}-${(currentDate.getMonth() + 1).toString().padStart(2, '0')}-${currentDate.getDate().toString().padStart(2, '0')}`;
			return {
				chartData: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['column'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 15, 0, 5],
					touchMoveLimit: 24,
					enableScroll: true,
					legend: {},
					xAxis: {
						disableGrid: true,
						scrollShow: true,
						itemCount: 4,
						rotateLabel: true,
						rotateAngle:45
					},
					yAxis: {
						data: [{
							min: 0
						}]
					},
					extra: {
						column: {
							type: "group",
							width: 30,
							activeBgColor: "#000000",
							activeBgOpacity: 0.08
						}
					}
				},
				optionVal: '', // 选中列表的值
				shopList: [],
				modalName: '',
				radio: '',
				// 滑动导航栏
				TabCur: 0,
				scrollLeft: 0,
				modules: [{
						"name": "柱状图"
					},
					{
						"name": "折线图"
					},
					{
						"name": "表格"
					},
				],
				delayList:[], // 延迟完成
				incompleteList:[], // 未完成
				formList:[], // 表格数据
				inputValue: '',
				suggestions: [],
				headNameList: [],
				formListCopy: [],
				after: formattedCurrentDate,
				before: formattedCurrentDate,
			}
		},
		onLoad() {
			this.getUserReport();
			this.getUserReportDelay();
			this.reportIncomplete();
			this.getReportform();
		},
		  computed: {
		    totalGmvSum() {
		      return this.formList.reduce((sum, form) => sum + form.gmvSum, 0);
		    },
			totalProfitSum() {
			  return this.formList.reduce((sum, form) => sum + form.profitSum, 0);
			},
		  },
		methods: {
			// 打开日历
			open(){
				this.$refs.calendar.open();
			},
			// 确认选择
			confirm(e) {
				this.after = e.range.after;
				this.before = e.range.before;
				if(e.range.after === ""){
					this.after = this.before;
				} else if(e.range.before === ""){
					this.before = this.after;
				}
				if( this.after < this.before){
					var temp = this.after;
					this.after = this.before;
					this.before = temp;
				}
				this.getUserReport();
				this.getUserReportDelay();
				this.reportIncomplete();
				this.getReportform();
			},
			handleInput() {
			  if (this.inputValue.trim() === '') {
				// 如果输入框内容为空，清空建议列表
				this.suggestions = [];
				this.formList = this.formListCopy;
			  } else {
				// 在这里根据输入内容生成建议列表
				// 示例：假设建议是以输入内容为前缀的一些选项
				this.suggestions = this.generateSuggestions(this.inputValue);
			  }
			},
			generateSuggestions(prefix) {
			  // 示例：生成一些建议，可以根据实际需求修改
			  // const options = ['Apple', 'Banana', 'Cherry', 'Date', 'Grape'];
			  return this.headNameList.filter(option => option.toLowerCase().startsWith(prefix.toLowerCase()));
			},
			selectSuggestion(suggestion) {
			  // 处理选择建议的逻辑，例如填充到输入框中
			  this.inputValue = suggestion;
			  this.formList = this.formList.filter(item => item.headName.includes(this.inputValue));
			  // 清空建议列表
			  this.suggestions = [];
			},
			// 选中折线图还是柱状图
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
				if(this.TabCur == 0){
				} else if(this.TabCur == 1){
				} else if (this.TabCur == 2){
				}
			},
			timeOfPreviousDay(data){
				let originalDate = new Date(data);
				// 推后一天
				let nextDay = new Date(originalDate);
				nextDay.setDate(originalDate.getDate() - 1);
				// 格式化为"YYYY-MM-DD"格式
				return nextDay.toISOString().split('T')[0];
			},
			// 柱状图 饼状图
			getUserReport() {
				var after = this.timeOfPreviousDay(this.after);
				var before = this.timeOfPreviousDay(this.before);
				var _this = this;
				uni.request({
					url: common.api_base_url + '/shopReport/getAllReportForStatistics',
					data: {
						after: after,
						before: before,
					},
					header: {},
					method: 'POST',
					success: res => {
						if (res.data.code == 200) {
							_this.chartData = res.data.data;
						} else {
							uni.showToast({
								title: res.data.message,
								duration: 2000,
								icon: "error"
							})
						}
					},
					fail: function(e) {
						uni.showToast({
							title: "唉哟，程序错误了[" + JSON.stringify(e) + "]",
							icon: "loading"
						})
					},
				});
			},
			// getAllShop() {
			// 	var _this = this;
			// 	uni.request({
			// 		url: common.api_base_url + '/shop/getAll',
			// 		data: {},
			// 		header: {},
			// 		method: 'GET',
			// 		success: res => {
			// 			if (res.data.code == 200) {
			// 				_this.shopList = res.data.data;
			// 			} else {
			// 				uni.showToast({
			// 					title: res.data.message,
			// 					duration: 2000,
			// 					icon: "error"
			// 				})
			// 			}
			// 		},
			// 		fail: function(e) {
			// 			uni.showToast({
			// 				title: "唉哟，程序错误了[" + JSON.stringify(e) + "]",
			// 				icon: "loading"
			// 			})
			// 		},
			// 	});
			// },
			// 延迟完成
			getUserReportDelay() {
				var after = this.timeOfPreviousDay(this.after);
				var before = this.timeOfPreviousDay(this.before);
				var _this = this;
				uni.request({
					url: common.api_base_url + '/shopReport/getReportDelay',
					data: {
						after: after,
						before: before,
						status:"2"
					},
					header: {},
					method: 'POST',
					success: res => {
						if (res.data.code == 200) {
							_this.delayList = res.data.data;
						} else {
							uni.showToast({
								title: res.data.message,
								duration: 2000,
								icon: "error"
							})
						}
					},
					fail: function(e) {
						uni.showToast({
							title: "唉哟，程序错误了[" + JSON.stringify(e) + "]",
							icon: "loading"
						})
					},
				});
			},
			// 查询表格数据
			getReportform() {
				var after = this.timeOfPreviousDay(this.after);
				var before = this.timeOfPreviousDay(this.before);
				var _this = this;
				uni.request({
					url: common.api_base_url + '/shopReport/getReportform',
					data: {
						after: after,
						before: before,
						status:"10"
					},
					header: {},
					method: 'POST',
					success: res => {
						if (res.data.code == 200) {
							_this.formList = res.data.data;
							_this.formListCopy = JSON.parse(JSON.stringify(_this.formList));
							_this.headNameList = _this.formList.map(item => item.headName);
						} else {
							uni.showToast({
								title: res.data.message,
								duration: 2000,
								icon: "error"
							})
						}
					},
					fail: function(e) {
						uni.showToast({
							title: "唉哟，程序错误了[" + JSON.stringify(e) + "]",
							icon: "loading"
						})
					},
				});
			},
			// 查询未完成任务
			reportIncomplete() {
				var after = this.timeOfPreviousDay(this.after);
				var before = this.timeOfPreviousDay(this.before);
				var _this = this;
				uni.request({
					url: common.api_base_url + '/shopReport/getReportDelay',
					data: {
						after: after,
						before: before,
						status:"0"
					},
					header: {},
					method: 'POST',
					success: res => {
						if (res.data.code == 200) {
							_this.incompleteList = res.data.data;
						} else {
							uni.showToast({
								title: res.data.message,
								duration: 2000,
								icon: "error"
							})
						}
					},
					fail: function(e) {
						uni.showToast({
							title: "唉哟，程序错误了[" + JSON.stringify(e) + "]",
							icon: "loading"
						})
					},
				});
			},
			bindTag(item) {
				/** 申请单状态  0-未完成  1-完成 2-超时完成 */
				if(item.status == 0){
					return "未完成";
				} else if (item.status == 1){
					return '完成';
				}else if (item.status == 2){
					return '超时完成';
				}
			},
			bindColor(item) {
				if(item.status == 0){
					return '#888481';
				} else if (item.status == 1){
					return '#3bb100';
				}else if (item.status == 2){
					return '#ff0000';
				}
			},
			bindBgColor(item) {
				// if(item.status == 0){
				// 	return '#F1F4FA';
				// } else if (item.status == 1){
				// 	return '#ff0000';
				// }else if (item.status == 3){
				// 	return '#55ffff';
				// }else if (item.status == 4){
				// 	return '#5555ff';
				// }
			},
		}
	}
</script>

<style scoped>
	.charts-box {
		width: 100%;
		height: 300px;
	}
	/* 导航栏固定一行 */
	.propertyBox{
			flex-flow: row;
			justify-content: flex-start;
			display: flex;
		}
		/* 导航栏 */
		.cu-item {
			text-align: center;
		  flex: 1; /* 设置每个元素的宽度为50% */
		}
		.suggestions {
		  position: fixed; /* 使用 fixed 定位 */
		  justify-content: center;
		  text-align: center;
		  top: auto; /* 调整垂直位置 */
		  left: 0; /* 调整水平位置 */
		  z-index: 99; /* 设置 z-index 属性，确保位于高层 */
		  background-color: white;
		  border: 1px solid #ccc;
		  max-height: 200px; /* 设置最大高度，可以根据需求调整 */
		  min-width: 100px;
		  overflow-y: auto; /* 添加滚动条，当建议项过多时可以滚动 */
		  margin-left: 20px;
		}

</style>